<template>
	<view class="container">
		<!-- 底部弹起协议面板 -->
		<view class="agreement-panel" :class="{ show: showCouponsPopup }">
			<view class="panel-header">
				<text class="panel-title">可使用优惠券</text>
			</view>

			<view class="panel-content">
				<scroll-view scroll-y="true" class="agreement-scroll">
					<!-- 优惠券列表 -->
					<view class="coupon-list">
						<view v-if="tousedCoupons.length > 0" class="coupon-item un-used" v-for="(item, index) in tousedCoupons" :key="index">
							<view class="coupon-left">
								<view class="coupon-value">
									<text class="coupon-flats">￥</text>
									{{ parseInt(item.amount) }}
								</view>
								<view class="coupon-unit">优惠券</view>
							</view>
							<view class="coupon-right">
								<view class="coupon-title">{{ item.title }}</view>
								<view class="coupon-date">有效期：{{ item.start_time }}~{{ item.end_time }}</view>
								<view class="coupon-footer">
									<view class="coupon-rules">
										<text>使用规则</text>
										<image v-if="!showRules[index]" class="gray-detail-icon" src="/static/personalCenter/gray-right.png" mode="aspectFill"></image>
										<image
											v-if="showRules[index]"
											class="gray-detail-icon"
											src="/static/personalCenter/gray-right.png"
											mode="aspectFill"
											style="transform: rotate(-90deg); transform-origin: 70% 50%"
										></image>
									</view>
									<view class="coupon-use-btn">
										<image
											v-if="!item.isChecked"
											class="check-icon"
											src="/static/personalCenter/auth-quan.png"
											mode="aspectFill"
											@click="handleIsChecked(item)"
										></image>
										<image
											v-if="item.isChecked"
											class="check-icon"
											src="/static/personalCenter/auth-gou.png"
											mode="aspectFill"
											@click="handleIsChecked(item)"
										></image>
									</view>
								</view>
							</view>
						</view>
						<empty-data v-if="tousedCoupons.length == 0" defaultText="暂无可使用优惠券" />
						<view v-if="false" class="rules-details-warps">
							<view class="rules-shape">
								<text class="rules-shape-item"></text>
								<text class="rules-shape-item"></text>
							</view>
							<view class="rules-content">
								<view class="rules-content-warps">
									<view class="rule-title">使用规则：</view>
									<view class="rule-item">1、优惠券可降低产品的价格，是一种常见的消费者营业推广工具。</view>
									<view class="rule-item">2、优惠券可以印在杂志的插页上</view>
									<view class="rule-item">3、或夹在报纸中随附送</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 遮罩层 -->
		<view class="mask" :class="{ show: showCouponsPopup }" @click="confirmAgreement"></view>
	</view>
</template>

<script>
export default {
	props: {
		showCouponsPopup: {
			type: Boolean,
			default: false
		},
		lineId: {
			type: String,
			default: ''
		},
		value: {
			type: String,
			default: ''
		}
	},
	watch: {
		showCouponsPopup(val) {
			if (val) {
				this.getCouponsList();
			}
		}
	},
	data() {
		return {
			isChecked: false,
			tousedCoupons: [], // 未使用优惠券数据
			showRules: {}, // 控制规则显示
			isShowRules: false,
			currentCitem: null
		};
	},
	methods: {
		handleIsChecked(item) {
			this.tousedCoupons.forEach((item) => {
				item.isChecked = false;
			});
			item.isChecked = !item.isChecked;
			this.currentCitem = item.isChecked ? item : null;
		},
		async getCouponsList() {
			try {
				const data = await this.$http.post('/h5/user/line/getOwnerCoupon', {
					amount: this.value
				});
				this.tousedCoupons = [];
				data.data &&
					data.data.forEach((item) => {
						let data = {
							...item,
							isChecked: false
						};
						this.tousedCoupons.push(data);
					});
			} catch (error) {}
		},
		toggleRules(index) {
			this.$set(this.showRules, index, !this.showRules[index]);
			this.isShowRules = !this.isShowRules;
		},
		confirmAgreement() {
			this.$emit('update:visible', false, this.currentCitem);
		}
	}
};
</script>

<style>
/* 优惠券面板样式 */
.agreement-panel {
	position: fixed;
	bottom: -100%;
	left: 0;
	right: 0;
	background-color: #f5f5f6;
	border-radius: 50rpx 50rpx 0 0;
	transition: all 0.3s ease;
	z-index: 100;
	max-height: 70vh;
}

.agreement-panel.show {
	bottom: 0;
}

.panel-header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx 0 52rpx 0;
}

.panel-title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #0b1f20;
	line-height: 48rpx;
}

.close-btn {
	/* font-size: 48rpx;
  color: #999; */
}

.panel-content {
	padding: 0 26rpx 84rpx 26rpx;
}

.agreement-scroll {
	max-height: 50vh;
}

.agreement-text {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 30rpx;
	color: #666666;
	line-height: 54rpx;
	letter-spacing: 1px;
}

/* 遮罩层样式 */
.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 99;
}

.mask.show {
	opacity: 1;
	pointer-events: auto;
}

/* 优惠券列表样式 */
.coupon-list {
}

.coupon-item {
	width: 100%;
	display: flex;
	margin-bottom: 20rpx;
	overflow: hidden;
	position: relative;
}

.coupon-left {
	width: 240rpx;
	text-align: center;
	padding-top: 38rpx;
}

.coupon-item.un-used {
	background-image: url('~@/static/personalCenter/coupon-1.png');
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.coupon-item.used {
	background-image: url('~@/static/personalCenter/coupon-2.png');
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.coupon-item.expired {
	background-image: url('~@/static/personalCenter/coupon-2.png');
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.coupon-value {
	font-family: DIN Pro, DIN Pro;
	font-weight: 700;
	font-size: 96rpx;
	color: #ffffff;
	line-height: 42rpx;
	padding-top: 38rpx;
	padding-bottom: 12rpx;
}

.coupon-flats {
	font-size: 32rpx;
}

.coupon-unit {
	font-family: Source Han Sans, Source Han Sans;
	font-size: 28rpx;
	color: #ffffff;
	line-height: 40rpx;
}

.coupon-right {
	flex: 1;
	padding: 26rpx 20rpx 22rpx 44rpx;
}

.coupon-title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 700;
	font-size: 34rpx;
	color: #0b1f20;
	line-height: 52rpx;
	letter-spacing: 1px;
	margin-bottom: 10rpx;
}

.coupon-date {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 24rpx;
	color: #999999;
	line-height: 36rpx;
	margin-bottom: 20rpx;
}

.coupon-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.coupon-rules {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 24rpx;
	color: #697592;
	line-height: 36rpx;
	display: flex;
	align-items: center;
}

.gray-detail-icon {
	width: 28rpx;
	height: 28rpx;
}

.coupon-use-btn image {
	width: 40rpx;
	height: 40rpx;
}

.rules-content {
	padding: 8rpx;
	background: #ffffff;
	border-radius: 16rpx;
	/* position: absolute;
  left: 0rpx;
  bottom: 0; */
}

.rules-content-warps {
	border-radius: 16rpx;
	border: 2rpx dashed #ff7937;
	padding: 20rpx 0 20rpx 20rpx;
}

.rule-title {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 28rpx;
	color: #0b1f20;
	line-height: 42rpx;
	padding-bottom: 12rpx;
}

.rule-item {
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-size: 26rpx;
	color: #697592;
	line-height: 40rpx;
}

.rules-shape {
	display: flex;
	justify-content: space-between;
	padding: 0 40rpx;
}

.rules-shape-item {
	width: 12rpx;
	height: 20rpx;
	background: #ff7937;
	display: block;
}
</style>
